<!DOCTYPE html>
<html>
<head>
    <title>Physics Rotor Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 10;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Helper function to draw dimension lines
        function drawDimensionLine(x1, x2, y, label) {
            // Horizontal line
            ctx.beginPath();
            ctx.moveTo(x1, y);
            ctx.lineTo(x2, y);
            
            // Vertical ticks
            ctx.moveTo(x1, y - 5);
            ctx.lineTo(x1, y + 5);
            ctx.moveTo(x2, y - 5);
            ctx.lineTo(x2, y + 5);
            ctx.stroke();

            // Label
            ctx.fillText(label, (x1 + x2) / 2, y + 20);
        }

        // --- Main Drawing ---
        window.onload = function() {
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2;
            ctx.font = 'italic 20px serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // --- Define coordinates and dimensions ---
            const cx = 400; // Center of the canvas and rotor system
            const cy = 230; // Vertical center of the rotor

            const l_px = 80;    // Half-length of the cylinder
            const d_px = 100;   // Distance from bearing to cylinder face
            const R_px = 60;    // Radius of the cylinder
            const r_ellipse_x = 25; // x-radius of the ellipse for perspective

            const x_cyl_L = cx - l_px;
            const x_cyl_R = cx + l_px;
            const x_bearing_L = x_cyl_L - d_px;
            const x_bearing_R = x_cyl_R + d_px;
            const x_shaft_L = x_bearing_L - 40;
            const x_shaft_R = x_bearing_R + 60;

            const y_cyl_T = cy - R_px;
            const y_cyl_B = cy + R_px;

            // --- Draw components (ordered for layering) ---

            // 1. Bearings (drawn first, to be in the back)
            ctx.fillStyle = '#e0e0e0';
            ctx.strokeStyle = '#333';
            // Left bearing
            ctx.beginPath();
            ctx.moveTo(x_bearing_L, y_cyl_T - 10);
            ctx.lineTo(x_bearing_L, y_cyl_B + 10);
            ctx.stroke();
            ctx.fillRect(x_bearing_L, y_cyl_T - 10, -10, (y_cyl_B - y_cyl_T) + 20);
            ctx.strokeRect(x_bearing_L, y_cyl_T - 10, -10, (y_cyl_B - y_cyl_T) + 20);
            
            // Right bearing
            ctx.beginPath();
            ctx.moveTo(x_bearing_R, y_cyl_T - 10);
            ctx.lineTo(x_bearing_R, y_cyl_B + 10);
            ctx.stroke();
            ctx.fillRect(x_bearing_R, y_cyl_T - 10, 10, (y_cyl_B - y_cyl_T) + 20);
            ctx.strokeRect(x_bearing_R, y_cyl_T - 10, 10, (y_cyl_B - y_cyl_T) + 20);

            ctx.strokeStyle = '#000';
            
            // 2. Shaft (drawn in segments to go "through" bearings)
            ctx.beginPath();
            ctx.moveTo(x_shaft_L, cy);
            ctx.lineTo(x_bearing_L, cy);
            ctx.moveTo(x_bearing_L-10, cy);
            ctx.lineTo(x_bearing_R+10, cy);
            ctx.moveTo(x_bearing_R, cy);
            ctx.lineTo(x_shaft_R, cy);
            ctx.stroke();

            // 3. Cylinder (drawn on top of the shaft)
            ctx.fillStyle = 'white';
            // Back (right) ellipse
            ctx.beginPath();
            ctx.ellipse(x_cyl_R, cy, r_ellipse_x, R_px, 0, 0, 2 * Math.PI);
            ctx.fill();
            ctx.stroke();
            
            // Cylinder body (white rectangle to hide shaft)
            ctx.fillRect(x_cyl_L, y_cyl_T, 2 * l_px, 2 * R_px);

            // Cylinder body outlines
            ctx.beginPath();
            ctx.moveTo(x_cyl_L, y_cyl_T);
            ctx.lineTo(x_cyl_R, y_cyl_T);
            ctx.moveTo(x_cyl_L, y_cyl_B);
            ctx.lineTo(x_cyl_R, y_cyl_B);
            ctx.stroke();

            // Front (left) ellipse
            ctx.beginPath();
            ctx.ellipse(x_cyl_L, cy, r_ellipse_x, R_px, 0, 0, 2 * Math.PI);
            ctx.fill();
            ctx.stroke();

            // Dashed center line of the cylinder
            ctx.save();
            ctx.setLineDash([5, 5]);
            ctx.beginPath();
            ctx.moveTo(x_cyl_L, cy);
            ctx.lineTo(x_cyl_R, cy);
            ctx.stroke();
            ctx.restore();

            // 4. Forces and Masses
            // Top-left mass m and force
            ctx.fillText('m', x_cyl_L - 30, y_cyl_T - 5);
            drawArrow(x_cyl_L, y_cyl_T, x_cyl_L - 35, y_cyl_T - 35);
            
            // Bottom-right mass m and force
            ctx.fillText('m', x_cyl_R + 30, y_cyl_B + 5);
            drawArrow(x_cyl_R, y_cyl_B, x_cyl_R + 35, y_cyl_B + 35);

            // 5. Labels and Dimensions
            // Radius R
            ctx.beginPath();
            ctx.moveTo(x_cyl_L + r_ellipse_x / 2, cy);
            ctx.lineTo(x_cyl_L + r_ellipse_x / 2, y_cyl_T);
            ctx.stroke();
            ctx.fillText('R', x_cyl_L + r_ellipse_x / 2 + 15, cy - R_px / 2);
            
            // Dimension lines at the bottom
            const dim_y = 380;
            ctx.font = '20px sans-serif';

            // Combined dimension line
            ctx.beginPath();
            ctx.moveTo(x_bearing_L, dim_y);
            ctx.lineTo(x_bearing_R, dim_y);
            ctx.moveTo(x_bearing_L, dim_y - 10); // Left tick
            ctx.lineTo(x_bearing_L, dim_y);
            ctx.moveTo(x_cyl_L, dim_y - 10); // Mid-left tick
            ctx.lineTo(x_cyl_L, dim_y);
            ctx.moveTo(x_cyl_R, dim_y - 10); // Mid-right tick
            ctx.lineTo(x_cyl_R, dim_y);
            ctx.moveTo(x_bearing_R, dim_y - 10); // Right tick
            ctx.lineTo(x_bearing_R, dim_y);
            ctx.stroke();
            
            ctx.font = 'italic 20px serif';
            ctx.fillText('d', (x_bearing_L + x_cyl_L) / 2, dim_y + 15);
            ctx.fillText('2l', (x_cyl_L + x_cyl_R) / 2, dim_y + 15);
            ctx.fillText('d', (x_cyl_R + x_bearing_R) / 2, dim_y + 15);

            // Angular velocity ω
            const omega_x = x_shaft_R - 25;
            ctx.beginPath();
            ctx.arc(omega_x, cy, 18, -Math.PI / 2.5, Math.PI / 2.5);
            ctx.stroke();
            // Arrowhead for omega
            drawArrow(omega_x + 18 * Math.cos(Math.PI / 2.5) - 1, cy + 18 * Math.sin(Math.PI / 2.5), omega_x + 18 * Math.cos(Math.PI / 2.5)+1, cy + 18 * Math.sin(Math.PI / 2.5) - 2);

            ctx.fillText('ω', omega_x + 35, cy);

            // Figure caption
            ctx.font = 'bold 20px sans-serif';
            ctx.fillText('Fig. 1.123.', cx, 450);
        };
    </script>
</body>
</html>